<!doctype html>
<html lang="'en">
<head>
	<meta charset="UTF-8">
	<title>Tab切换-延迟</title>
	<link type="text/css" rel="stylesheet" href="css/style.css">
	<script type="text/javascript" src="js/script.js"></script>
</head>
<style>
	*{margin:0;
  padding:0;
  list-style:none;
  font-size:12px;}

.notice{width:298px;
        height:98px;
        margin:10px;
        border:1px solid #eee;
        overflow:hidden;}

.notice-tit{height:27px;
            position:relative;
            background:#F7F7F7;}

.notice-tit ul{position:absolute;
               width:301px;
               left:-1px;}

.notice-tit li{float:left;
               width:58px;
               height:26px;
               line-height:26px;
               text-align:center;
               overflow:hidden;
               background:#FFF;
               padding:0 1px;
               background:#F7F7F7;
               border-bottom:1px solid #eee;}

.notice-tit li.select{background:#FFF;
                      border-bottom-color:#FFF;
                      border-left:1px solid #eee;
                      border-right:1px solid #eee;
                      padding:0;
                      font-weight:bolder;}

.notice li a:link,.notice li a:visited{text-decoration:none;
                                               color:#000;}

.notice li a:hover{color:#F90;}

.notice-con .mod{margin:10px 6px;}

.notice-con .mod ul li{float:left;
                       width:143px;
                       height:25px;
                       overflow:hidden;}


</style>
<body>
	<div id="notice" class="notice">
		<div id="notice-tit" class="notice-tit">
		  <ul>
		  	<li class="select">
		  		<a href="#">公告</a>
		  	</li>
		  	<li>
		  		<a href="#">规则</a>
		  	</li>
		  	<li>
		  		<a href="#">论坛</a>
		  	</li>
		  	<li>
		  		<a href="#">安全</a>
		  	</li>
		  	<li >
		  		<a href="#">公益</a>
		  	</li>
		  </ul>
		</div>
		<div id="notice-con" class="notice-con">
			<div class="mod" style="display:block">
				<ul>
					<li>
						<a href="#">
                          张勇：要玩快乐足球
						</a>
					</li>
                    <li>
						<a href="#">
                          阿里2000万驰援灾区！
						</a>
					</li>
					<li>
						<a href="#">
                          旅游宝让你边玩边赚钱
						</a>
					</li>
					<li>
						<a href="#">
                          多行跟进阿里信用贷款
						</a>
					</li>
				</ul>
			</div>
            <div class="mod" style="display:none">
				<ul>
					<li>
						<span>
							[
                              <a href="#">通知</a>
							]
						</span>
						<a href="#">
                          "滥发"即将换新
						</a>
					</li>
                    <li>
						<span>
							[
                              <a href="#">通知</a>
							]
						</span>
						<a href="#">
                          比特币严管啦！
						</a>
					</li>
					<li>
						<span>
							[
                              <a href="#">通知</a>
							]
						</span>
						<a href="#">
                          禁发商品名录！
						</a>
					</li>
	                <li>
						<span>
							[
                              <a href="#">通知</a>
							]
						</span>
						<a href="#">
                          商品属性限制
						</a>
					</li>
				</ul>
			</div>
			<div class="mod" style="display:none">
				<ul>
					<li>
						<span>
							[
                              <a href="#">聚焦</a>
							]
						</span>
						<a href="#">
                          金牌卖家再启航
						</a>
					</li>
                    <li>
						<span>
							[
                              <a href="#">功能</a>
							]
						</span>
						<a href="#">
                          橱窗规则升级啦
						</a>
					</li>
					<li>
						<span>
							[
                              <a href="#">话题</a>
							]
						</span>
						<a href="#">
                          又爱又恨优惠劵 
						</a>
					</li>
	                <li>
						<span>
							[
                              <a href="#">工具</a>
							]
						</span>
						<a href="#">
                          购后送店铺红
						</a>
					</li>
				</ul>
			</div>
            <div class="mod" style="display:none">
				<ul>
					<li>
						<a href="#">
                          个人重要信息要管牢！
						</a>
					</li>
                    <li>
						<a href="#">
                           卖家防范红包欺诈提醒
						</a>
					</li>
					<li>
						<a href="#">
                            更换收货地址的陷阱！
						</a>
					</li>
	                <li>
                        <a href="#">
                           注意骗子的技术升级了！
						</a>
					</li>
				</ul>
			</div>
            <div class="mod" style="display:none">
				<ul>
					<li>
						<a href="#">
                          走进无声课堂
						</a>
					</li>
                    <li>
						<a href="#">
                           淘宝之行大众评审赢公益金
						</a>
					</li>
					<li>
						<a href="#">
                            爱心品牌联合征集
						</a>
					</li>
	                <li>
                        <a href="#">
                           名公益机构淘宝开店攻略
						</a>
					</li>
				</ul>
			</div>
		</div>
	</div>
</body>
</html>
<script>
	function $(id){
		return typeof id === 'string' ? document.getElementById(id) : id;
	}

	window.onload = tab; 
	function tab(){
		//当前高亮显示的索引值
		var index = 0;
		var timer = null;

		//获取所有页签的内容
		var lis = $('notice-tit').getElementsByTagName('li'),
			divs = $('notice-con').getElementsByTagName('div');
		for (var i = 0; i < lis.length; i++) {
			lis[i].id = i ;
			lis[i].onmouseover = function(){
				clearInterval(timer);
				changeOption(this.id);
			}
			lis[i].onmouseout = function(){
				timer = setInterval(autoPlay,2000);
			}
		}
		//添加定时器，改变当前的索引
		timer = setInterval(autoPlay,2000);

		if (timer) {
			clearInterval(timer);
			timer = null;
		}

		function changeOption(currentLi){
			for (var j = 0; j < lis.length; j++) {
				lis[j].className = '';
				divs[j].style.display = 'none';
			}
			lis[currentLi].className = 'select';
			divs[currentLi].style.display = 'block';
			index = currentLi;
		}

		function autoPlay(){
			index++;
			if (index >= lis.length) {
				index = 0;
			}
			changeOption(index);
		}
	}
</script>